<template>
  <div class="flex w-screen h-screen overflow-hidden">
    <!-- 折叠菜单 -->
    <div
      class="border-r border-r-muted h-full overflow-auto transition-all"
      :class="[collapsed ? 'w-19' : 'w-40']"
    >
      <UNavigationMenu
        orientation="vertical"
        :items="sidemenu"
        :collapsed="collapsed"
        :tooltip="collapsed"
        color="secondary"
        :ui="{
          label: 'py-3 text-sm',
          link: 'py-4 text-base px-6',
          linkLeadingIcon: 'size-6'
        }"
      />
    </div>
    <div class="flex-1 overflow-hidden flex flex-col">
      <nav class="w-full px-3 h-15 flex items-center gap-4 border-b border-b-muted">
        <!-- 折叠菜单 -->
        <UTooltip :text="collapsed ? '展开菜单' : '折叠菜单'">
          <UButton
            @click="collapsed = !collapsed"
            :icon="collapsed ? `i-mingcute:layout-right-line` : `i-mingcute:layout-left-line`"
            color="neutral"
            variant="ghost"
            size="xl"
          />
        </UTooltip>
        <div class="flex-1">
          <!-- 全局搜索 -->
          <ModalSearch></ModalSearch>
        </div>
        <!-- 个人设置 -->
        <UDropdownMenu :items="dropdownMenu">
          <NuxtImg
            class="size-10 overflow-hidden rounded-full"
            placeholder="/images/user.png"
          ></NuxtImg>
        </UDropdownMenu>
      </nav>
      <!-- 页面内容 -->
      <div class="p-6 bg-muted flex-1 overflow-auto flex flex-col relative">
        <div class="flex items-center justify-between mb-4">
          <span class="inline-block font-semibold text-xl">{{ getPageTitle(path) }}</span>
          <UBreadcrumb col :items="breadcrumbItems" />
        </div>
        <UCard>
          <nuxt-page></nuxt-page>
        </UCard>
        <div class="py-1 flex justify-center gap-2 absolute bottom-0 left-0 right-0">
          <div v-for="item in AppDesc" class="flex gap-1 items-center text-xs">
            <div class="size-1 rounded-full bg-primary"></div>
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { BreadcrumbItem } from '@nuxt/ui'
import { useBreadcrumb } from '~/composables/useBreadcrumb'
import { AppDesc } from '~/configs/app'
import sidemenu from '~/configs/sidemenu'
import type { DropdownMenuItem } from '@nuxt/ui'

const { path } = useRoute()

const dropdownMenu = ref<DropdownMenuItem[][]>([
  [
    {
      label: 'Benjamin',
      avatar: {
        src: '/images/user.png'
      },
      type: 'label'
    }
  ],
  [
    {
      label: '退出',
      icon: 'i-mingcute:exit-door-line',
      onSelect(e: Event) {
        e.preventDefault()
      }
    }
  ]
])

const collapsed = ref(false)

const { getPageTitle, generateBreadcrumb } = useBreadcrumb()
const breadcrumbItems = ref<BreadcrumbItem[]>([])
watchEffect(() => {
  breadcrumbItems.value = generateBreadcrumb()
})
</script>
